<!DOCTYPE html>
<html>
<head>
    <title>highlight高亮代码</title>
    <meta charset="UTF-8">
    <script src="../libs/Unify.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/languages/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/styles/srcery.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/Buttons/2.0.0/css/buttons.css" rel="stylesheet">
    <script>
        /**
         * 按钮选择
         * https://unicorn-ui.com/buttons/
         * 可以在下面的CDN上获取到所需的js文件
         * https://www.bootcdn.cn/
         * 可以把代码复制到下面这个页面中，然后在页面点分享按钮，就可以生成分享链接
         * https://highlightjs.org/demo#lang=javascript&v=1&theme=srcery
        */
    </script>
    <style>
        .hljs {
            font-family: 微软雅黑;
        }
        body {
            background-color: #1C1B19;
        }
        pre code td.hljs-ln-numbers {
            text-align: center;
            color: #9c9c9c;
            border-right: 0.5px solid #9c9c9c;
            vertical-align: top;
            padding-left: 0.5rem;
            padding-right: 0.8rem;
            border: none;
        }
        pre code td.hljs-ln-code {
            padding-left: 1rem;
            border: none;
        }
    </style>
</head>
<body>
    <pre>
        <code id="code" class="">
        </code>
    </pre>
    <h2 style="color: #AAAAAA;">把代码复制到下面这个文本框中，按Tap键即可生成</h2>
    <textarea id="myTextarea" onchange="change()" style="width: 100%;height: 100px;"></textarea>
    <a href="https://highlightjs.org/demo#lang=javascript&v=1&theme=srcery" class="button button-glow button-rounded button-raised button-primary">更多代码美化</a>
    <a onclick="clickHandler(1)" class="button button-glow button-rounded button-raised button-primary">HTML样式</a>
    <a onclick="clickHandler(2)" class="button button-glow button-rounded button-raised button-primary">分享复制</a>
    <script>
        var code = document.getElementById('code');
        var comyTextareade = document.getElementById('myTextarea');
        code.innerHTML = `//美化代码易于阅读
function doFun(){
    for(let i=0;i<10;i++){
        console.log(i)
    }
}`
        function change() {
            let str=myTextarea.value||'无代码';
            let reg=new RegExp('<','g');
            str = str.replace(reg,'&lt;');
            reg=new RegExp('>','g');
            str = str.replace(reg,'&gt;');
            //console.log(str);
            code.innerHTML = str;
            hljs.highlightAll();
            hljs.initLineNumbersOnLoad();
        }
        hljs.highlightAll();
        hljs.initLineNumbersOnLoad();
        const paramValue = window.location.href.split('yzlCode=')[1]
        console.log('paramValue='+paramValue)
        if(paramValue){
            myTextarea.value=Unify.base64(paramValue,1)
            change();
        }

        function clickHandler(t){
            if(t==1){
                window.open(`https://highlightjs.org/demo#lang=xml&v=1&theme=srcery`,'_blank');
            }else if(t==2){
                let url=window.location.href.split('.html')[0]+'.html'
                let str=`${url}?&yzlCode=${Unify.base64(myTextarea.value,0)}`;
                console.log(str);
                Unify.copyString(str);
            }
            
        }
    </script>
</body>

</html>